// 演示
<template>
  <el-button @click="graphDispose" type="primary" style="margin: 10px">销毁画布</el-button>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph,DataUri,Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const graphDispose = () => {
  ElMessage({
    message: "销毁画布",
    type: "success",
  });
  graph.dispose()
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {

  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
